<template>
  <view class="ra_container_code">
    <view class="code-info">
      <view class="o">取货码</view>
      <view class="s">{{ orderInfo.pickUpCode }}</view>
      <view class="t">
        <view class="left" @click="copyCode(orderInfo.pickUpCode)">复制取货码</view>
<!--        <view class="right" @click="saveCode(orderInfo.pickUpCode)">保存到相册</view>-->
        <view class="right" @click="saveCodeNew">保存到相册</view>
      </view>
    </view>

    <view class="address-info">
      <view class="head">
        <text>承运单号：{{ orderInfo.billNo }}</text>
        <image class="car" src="../../assets/images/orderTracking/bgCar.png"></image>
      </view>
      <view class="sends">
        <view class="row">
          <view class="title_1">发</view>
          <view class="value" style="border-bottom: 1rpx solid #f5f5f5">
            <view class="name">{{ orderInfo.shipper }} {{ orderInfo.shipperTel }}</view>
            <view class="pos">{{ orderInfo.toFromAdd || '-' }}</view>
          </view>
        </view>
        <view class="row">
          <view class="title_2">收</view>
          <view class="value">
            <view class="name">{{ orderInfo.receiver }} {{ orderInfo.receiverTel }}</view>
            <view class="pos">{{ orderInfo.fromAdd || '-' }}</view>
          </view>
        </view>
      </view>
    </view>

    <view class="qh-network">
      <view class="title">取货网点</view>
      <view class="content">
        <image
            class="wangdianImg"
            src="@/assets/images/index/wangdian_img_putongwangdian.png"
        ></image>
        <view class="text">
          <view class="text1">{{ orderInfo.destinationBranchName || '-' }}</view>
          <view class="text2">{{ orderInfo.destinationAddress || '-' }}</view>
          <view class="text3">距离收货地</view>
        </view>
        <view class="icon_group">
          <image
              src="@/assets/images/index/icon_wangdiandianhua.png"
          ></image>
          <image
              style="margin-left: 5px"
              src="@/assets/images/index/icon_wangdiandaohang.png"
          ></image>
        </view>
      </view>
    </view>

    <view class="goods-box">
      <view class="title">货物信息</view>
      <view class="goods-list">
        <view class="goods-item" v-for="(item,index) in (orderInfo.goodsInfo||[])">
          <text>{{item.goodsName}}{{item.goodsNumber}}件</text>
          <text>{{item.specifications}}</text>
        </view>
      </view>
    </view>
    <view style="position:fixed;top:99999999999px;">
      <wxml-to-canvas class="widget" width="326" height="100"></wxml-to-canvas>
    </view>

    <view style="position:fixed;left:0;top:99999999rpx">
      <canvas style="width: 702rpx;height: 1000rpx;" canvas-id="bcqhm"></canvas>
    </view>
  </view>
</template>
<script lang="ts" setup>
import { ref, computed } from "vue";
import { $get, $post } from "@/@api";
import Taro, {useRouter,getCurrentInstance, useDidShow} from "@tarojs/taro";
import dateChoose from './dateChoose.vue'
import useUserInfoStore from "@/store/user";
const userStore = useUserInfoStore()
const orderInfo = ref<any>({})
const { page } = getCurrentInstance()
let widget:any

const getOrderInfo = async ()=>{
  let res: any = await $post(
      "/selfmachine-system/order/list",
      {
        billNo: useRouter().params.billNo,
      }
  )
  orderInfo.value = res.data.rows[0]
}

const copyCode = (val)=>{
  Taro.setClipboardData({
    data: val
  })
}

const saveCode = (val)=>{
  widget = page.selectComponent('.widget')
  const p1 = widget.renderToCanvas({
    wxml: `
     <view>
       <view class="codeInfo">
          <text class="label">取货码</text>
          <text class="value">${val}</text>
       </view>
     </view>
    `,
    style: {
      codeInfo: {
        width: 326,
        height: 110,
        backgroundColor: '#fff',
        flexDirection: 'column',
        alignItems: 'center',
      },
      label: {
        color: '#252525',
        fontSize: 14,
        width: 326,
        height: 14,
        textAlign: 'center',
        verticalAlign: 'center',
        marginTop: 18,
      },
      value: {
        color: '#0966ff',
        fontSize: 20,
        width: 326,
        height: 20,
        textAlign: 'center',
        verticalAlign: 'center',
        marginTop: 20,
      },
    },
  })
  p1.then((res)=>{
    getFilePath()
  }).catch((err)=>{
    console.log(err)
  })
}

const saveCodeNew = ()=>{
  const ctx = Taro.createCanvasContext('bcqhm')

  ctx.fillStyle = '#fff'
  ctx.fillRect(0,0,351, 1000)

  ctx.drawImage('../../assets/images/index/shareqr/qrhead.png', 0, 0, 351, 56)

  ctx.strokeStyle = '#e3e7ec'
  ctx.lineWidth = 1
  ctx.strokeRect(8, 64, 335, 44)

  ctx.drawImage('../../assets/images/codeList/network_house.png', 20, 77, 18, 18)

  ctx.fillStyle = '#252525'
  ctx.font = "bold 14px 黑体"
  ctx.fillText(orderInfo.value.destinationBranchName, 48, 91 )

  ctx.strokeStyle = '#e3e7ec'
  ctx.lineWidth = 1
  ctx.strokeRect(8, 108, 335, 112)

  ctx.fillStyle = '#252525'
  ctx.font = "bold 16px 黑体"
  ctx.fillText('取货码', 151, 148 )

  ctx.fillStyle = '#0966ff'
  ctx.font = "bold 32px 黑体"
  ctx.fillText(orderInfo.value.pickUpCode.slice(0,4) + ' ' + orderInfo.value.pickUpCode.slice(4), 102, 186 )

  ctx.strokeStyle = '#e3e7ec'
  ctx.lineWidth = 1
  ctx.strokeRect(8, 220, 335, 68 + (orderInfo.value.goodsInfo.length-1) * 24)

  ctx.fillStyle = '#666'
  ctx.font = "12px 黑体"
  ctx.fillText('承运单号', 20, 244)
  ctx.fillText('货物信息', 20, 272)

  ctx.fillStyle = '#252525'
  ctx.font = "12px 黑体"
  ctx.fillText(orderInfo.value.billNo, 88, 244)

  orderInfo.value.goodsInfo.forEach((item,index)=>{
    ctx.fillText(`${item.goodsName}${item.goodsNumber}件，${item.weigh}kg，${item.goodsVolume}m³，${item.packing}`, 88, 272 + index*24)
  })

  ctx.draw()

  Taro.canvasToTempFilePath({
    canvasId: 'bcqhm',
    height: 296 + (orderInfo.value.goodsInfo.length-1) * 24,
    success: (res)=>{
      console.log(res.tempFilePath)
      Taro.saveImageToPhotosAlbum({
        filePath: res.tempFilePath,
        success: res => {
          Taro.showToast({
            title: '成功保存到相册',
            icon: 'success'
          })
        }
      })
    }
  })
}

const getFilePath = ()=>{
  const p2 = widget.canvasToTempFilePath()
  p2.then(res => {
    console.log(res.tempFilePath)
    let imageUrl = res.tempFilePath

    Taro.saveImageToPhotosAlbum({
      filePath: imageUrl,
      success: res => {
        Taro.showToast({
          title: '成功保存到相册',
          icon: 'success'
        })
      }
    })


  })
}

getOrderInfo()






</script>
<style lang="scss">
page {
  background-color: #f5f5f5;
}
.ra_container_code {
  width: 100%;
  box-sizing: border-box;
  padding: 0rpx 24rpx 24rpx;
  .st {
    padding-left: 10rpx;
    color: #777;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 440rpx;
  }

  .address-info {
    width: 100%;
    box-sizing: border-box;
    border-radius: 16rpx;
    margin-top: 16rpx;
    overflow: hidden;
    background-color: #fff;
    padding-bottom: 32rpx;
    .head {
      width: 100%;
      height: 72rpx;
      box-sizing: border-box;
      padding: 0 24rpx;
      display: flex;
      position: relative;
      align-items: center;
      background: linear-gradient(96deg, #CCE0FF 0%, #FFFFFF 100%);
      text {
        font-size: 24rpx;
      }
      .copy {
        font-size: 18rpx;
        padding: 7rpx 12rpx;
        border-radius: 20rpx;
        border: 1rpx solid #666;
        margin-left: 12rpx;
        box-sizing: border-box;
      }
      .car {
        position: absolute;
        right: 0;
        bottom: 0;
        width: 158rpx;
        height: 88rpx;
      }
    }
    .sends {
      width: 100%;
      .row {
        width: 100%;
        display: flex;
        align-items: center;
        font-weight: 500;
        box-sizing: border-box;
        padding: 0 24rpx 0 27rpx;
        .title_1 {
          width: 42rpx;
          height: 42rpx;
          line-height: 42rpx;
          text-align: center;
          background: linear-gradient(150deg, #3783FF 14%, #125AD2 93%);
          color: #fff;
          font-size: 20rpx;
          border-radius: 50%;
        }
        .title_2 {
          width: 42rpx;
          height: 42rpx;
          line-height: 42rpx;
          text-align: center;
          background: linear-gradient(137deg, #13E879 14%, #0EC365 89%);
          color: #fff;
          font-size: 20rpx;
          border-radius: 50%;
        }
        .value {
          width: calc(100% - 60rpx);
          margin-left: 16rpx;
          display: flex;
          flex-direction: column;
          padding: 12rpx 0;
          .name {
            width: 100%;
            font-size: 32rpx;
            line-height: 48rpx;
            color: #252525;
          }
          .pos {
            width: 100%;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            color: #666;
            font-size: 24rpx;
            line-height: 32rpx;
          }
        }
      }
    }
  }

  .qh-network {
    width: 100%;
    background-color: #fff;
    border-radius: 16rpx;
    box-sizing: border-box;
    padding: 0 24rpx;
    margin-top: 16rpx;
    .title {
      height: 96rpx;
      line-height: 96rpx;
      width: 100%;
      border-bottom: 1rpx solid #f5f5f5;
      font-size: 32rpx;
      font-weight: 500;
      color: #252525;
    }
    .content {
      width: 100%;
      height: 160rpx;
      position: relative;
      box-sizing: border-box;
      display: flex;
      align-items: center;

      .wangdianImg {
        width: 112rpx;
        height: 112rpx;
        margin-right: 16rpx;
      }
      .text {
        height: 112rpx;
        width: 300rpx;
        .text1 {
          font-weight: 700;
          font-size: 28rpx;
          color: #252525;
        }
        .text2 {
          font-size: 22rpx;
          color: #666666;
          margin-bottom: 6rpx;
          line-height: 30rpx;
          width: 300rpx;
          height: 30rpx;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        .text3 {
          font-size: 22rpx;
          color: #666666;
        }
      }
      .icon_group {
        display: flex;
        height: 100%;
        align-items: center;
        margin-left: 100rpx;
        image {
          width: 64rpx;
          height: 64rpx;
        }
      }
    }
  }

  .goods-box {
    width: 100%;
    background-color: #fff;
    border-radius: 16rpx;
    box-sizing: border-box;
    padding: 0 24rpx 24rpx;
    margin-top: 16rpx;
    .title {
      height: 96rpx;
      line-height: 96rpx;
      width: 100%;
      font-size: 32rpx;
      font-weight: 500;
      color: #252525;
    }
    .goods-list {
      width: 100%;
      background-color: #f5f5f5;
      border-radius: 16rpx;
      box-sizing: border-box;
      .goods-item {
        width: 100%;
        height: 88rpx;
        padding: 0 24rpx;
        box-sizing: border-box;
        border-bottom: 1rpx solid #eaeaea;
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: #252525;
        font-size: 26rpx;
        &:last-child {
          border-bottom: none;
        }
      }
    }
  }

  .bottoms {
    position: fixed;
    width: 100%;
    height: 128rpx;
    left: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    border-top: 1rpx solid #f5f5f5;
    .submit-btn {
      width: 700rpx;
      height: 88rpx;
      background-color: #0966ff;
      color: #fff;
      font-size: 32rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 44rpx;
    }
  }

  .code-info {
    width: 100%;
    background-color: #fff;
    border-radius: 16rpx;
    box-sizing: border-box;
    padding: 48rpx 24rpx;
    margin-top: 16rpx;
    display: flex;
    flex-direction: column;
    align-items: center;

    .o {
      font-size: 28rpx;
      color: #252525;
    }

    .s {
      font-size: 48rpx;
      /* 主色/蓝 */
      color: #0966ff;
      width: 242rpx;
      height: 72rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 24rpx;
    }

    .t {
      display: flex;
      font-family: PingFangSC-Regular;
      font-size: 24rpx;

      .left {
        width: 166rpx;
        height: 56rpx;
        border-radius: 88rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        border: 1rpx solid #c4c4c4;
        color: #252525;
        margin-right: 16rpx;
      }

      .right {
        width: 166rpx;
        height: 56rpx;
        border-radius: 88rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        border: 1rpx solid #0966ff;
        color: #0966ff;
      }
    }
  }
}
</style>
